<template>
  <li class="security-item">
    <h3>{{ contactType === 'phone' ? '手机号绑定' : '邮箱号绑定' }}</h3>
    <div style="display: flex; justify-content: space-between; align-items: center">
      <p v-if="isBound" style="margin: 0;" class="bound-phone-text">
        已绑定{{ contactType === 'phone' ? '手机号' : '邮箱号' }}: {{ userInfo[contactType] }}
      </p>
      <p v-else style="margin: 0;" class="bound-phone-text">暂未绑定{{ contactType === 'phone' ? '手机' : '邮箱' }}</p>
      <a-button
          @click="isBound ? confirmUnbind() : openBindModal()"
      >
        {{ isBound ? '解绑' + (contactType === 'phone' ? '手机号' : '邮箱号') : '绑定' + (contactType === 'phone' ? '手机号' : '邮箱号') }}
      </a-button>
    </div>
    <a-modal
        :open="isBindModalVisible"
        :title="'绑定' + (contactType === 'phone' ? '手机号' : '邮箱号')"
        @ok="handleBind"
        @cancel="closeBindModal"
    >
      <template #content>
        <a-form @submit.prevent="handleBind">
          <a-form-item :label="contactType === 'phone' ? '新手机号' : '新邮箱号'">
            <a-input v-model:value="newContact" />
          </a-form-item>
          <a-form-item label="验证码">
            <a-input v-model:value="verificationCode" />
            <a-button
                @click="sendVerificationCode"
                style="margin-left: 8px"
            >
              发送验证码
            </a-button>
          </a-form-item>
        </a-form>
      </template>
    </a-modal>
  </li>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { message, Modal } from 'ant-design-vue';

const props = defineProps({
  contactType: {
    type: String,
    required: true,
    validator: (value: string) => ['phone', 'email'].includes(value)
  },
  isBound: {
    type: Boolean,
    default: false
  },
  userInfo: {
    type: Object,
    required: true
  }
});

const emits = defineEmits(['bind', 'unbind', 'sendCode']);

const isBindModalVisible = ref(false);
const newContact = ref('');
const verificationCode = ref('');

const openBindModal = () => {
  isBindModalVisible.value = true;
};

const closeBindModal = () => {
  isBindModalVisible.value = false;
  newContact.value = '';
  verificationCode.value = '';
};

const sendVerificationCode = () => {
  if (newContact.value) {
    emits('sendCode', props.contactType);
  } else {
    message.error(`请先输入${props.contactType === 'phone' ? '手机号' : '邮箱号'}`);
  }
};

const handleBind = () => {
  emits('bind', props.contactType);
  closeBindModal();
};

const confirmUnbind = () => {
  Modal.confirm({
    title: `确认解绑${props.contactType === 'phone' ? '手机号' : '邮箱号'}`,
    content: '解绑后账户将无法受到安全保障，是否继续？',
    onOk() {
      emits('unbind', props.contactType);
    },
    onCancel() {
      console.log(`取消解绑${props.contactType === 'phone' ? '手机号' : '邮箱号'}`);
    },
  });
};
</script>

<style scoped lang="less">
.security-item {
  padding: 20px;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.bound-phone-text {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.5);
}
</style>